<template>
  <div>
    <div :style="labelStyleClass" class="labelCommonClass">
      {{labelMsg}}
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      labelClass: {},
      labelMsg: ''
    },
    data() {
      return {
        labelDefaultWidth: '58px',
        labelDefaultHeight: '48px'
      }
    },
    computed: {
      labelStyleClass() {
        let {labelClass} = this.$props
        if (labelClass === undefined) {
          labelClass = {}
        }
        if (labelClass.hasOwnProperty('width')) {
          labelClass['width'] = labelClass['width'].split('px')[0] - 10 + 'px'
        } else {
          labelClass['width'] = this.labelDefaultWidth.split('px')[0] - 10 + 'px'
        }
        if (labelClass.hasOwnProperty('height')) {
          labelClass['height'] = labelClass['height'].split('px')[0] - 10 + 'px'
        } else {
          labelClass['height'] = this.labelDefaultHeight.split('px')[0] - 10 + 'px'
        }

        labelClass[`line-height`] = labelClass['height']

        return labelClass
      }
    }
  }
</script>

<style scoped>
.labelCommonClass {
  font-size:18px;
  font-family:Microsoft YaHei;
  font-weight:400;
  color:rgba(220,220,220,1);
  margin: 5px 5px;
}
</style>
